<template>
  <div class="article">
    <!-- 返回按钮 -->
    <van-button class="backButton" type="primary" icon="arrow-left" round plain @click="$router.go(-1)" v-show="closeButton">返回</van-button>
    <!-- 标题/用户信息 -->
    <h1>{{ detail.title }}</h1>
    <div class="myInfo">
      <img :src="detail.avatar" alt="" />
      <ul>
        <li>{{ detail.uname }}<span>LV35</span></li>
        <li>{{ detail.create_time }} 发表</li>
      </ul>
      <!-- 为icon绑定点击事件,点击弹出底部分享框 -->
      <van-icon class="share" name="share-o" color="#50bdb9" size="25" @click="showShare = true" />
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      <van-popup v-model="show" :close-on-click-overlay="true" closeable close-icon="close" close-icon-position="top-right">
        <van-image :src="qrcode"></van-image>
      </van-popup>
    </div>
    <!-- 旅游信息展示:游玩地点-出发时间-出行天数-人均费用-->
    <div class="travelInfo">
      <h2>我的旅游信息</h2>
      <ul>
        <li>游玩地点 : {{ detail.destination }}</li>
        <li>出发时间 : {{ detail.start_time }}</li>
      </ul>
      <ul>
        <li>出行时间 : {{ detail.days }}天</li>
        <li>人均费用 : {{ detail.price }}元</li>
      </ul>
    </div>
    <!-- 正文:图文结合 -->
    <div class="main" :class="{ limit: isMore }" v-html="detail.content"></div>
    <!-- 展开/收起 -->
    <van-button class="closeButton" type="primary" icon="arrow-up" round plain @click="close" v-show="closeButton">收起</van-button>
    <div class="showMore" v-show="isMore" @click="open">展开查看更多</div>
    <div class="showMore" v-show="!isMore" @click="close">收起</div>
    <!-- 更多游记 -->
    <div class="others-travel">
      <div class="title">推荐游记</div>
      <!-- <router-link :to="`/articles/${item.tid}`"> -->
      <div v-for="(item, i) of recommend" :key="i" @click="refresh(item.tid)" class="list-item">
        <van-image class="cover" fit="scale-down" :src="item.cover_img"></van-image>
        <div class="list-info">
          <div class="list-title">{{ item.title }}</div>
          <div class="message">
            <van-image round :src="item.avatar"></van-image>
            <span>{{ item.uname }}</span>
            <span>{{ item.create_time }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 定制师推荐 -->
    <my-recommend></my-recommend>
    <!-- 间隔 -->
    <div class="interval"></div>
    <!-- 底部 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
import { getNoteDetail, getRecommend, getQrcode } from '../server/article.js';
// 弹出toast分享框
import { Toast } from 'vant';
export default {
  props: ['tid'],
  data() {
    return {
      show: false, //控制popup弹出
      qrcode: '', //保存二维码
      href: '', //保存游记链接
      uid: '', //保存文章作者ID
      isMore: true, //控制文章展开收起
      closeButton: false, //收起按钮弹出
      detail: {}, //存储文章详情
      recommend: [], //存储推荐游记
      showShare: false, //默认关闭分享框
      options: [
        { name: '复制链接', icon: 'link' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  async mounted() {
    // 打开加载中toast
    this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true,
    });
    // 获取详情
    await getNoteDetail(this.tid).then((result) => {
      // 将服务器传回的时间转为人看的时间
      result[0].start_time = this.moment(result[0].start_time).format('YYYY-MM-DD');
      result[0].create_time = this.moment(result[0].create_time).format('YYYY-MM-DD');
      this.detail = result[0];
      this.uid = result[0].uid;
    });
    // 获取推荐游记
    await getRecommend().then((result) => {
      for (var item of result) {
        // 将服务器传回的时间转为人看的时间
        item.create_time = this.moment(result[0].create_time).format('YYYY-MM-DD');
      }
      this.recommend = result;
    });
    // 数据加载完毕后关闭加载中toast
    this.$toast.clear();
    // 判断滚动
    window.addEventListener('scroll', this.pageScroll);
  },
  methods: {
    //点击分享按钮弹出
    onSelect(options, index) {
      //如果用户点击的是分享链接，则需要获取浏览器地址并复制
      this.href = location.href;
      if (index == 0) {
        this.$copyText(this.href).then();
        Toast(`复制成功`); //弹出复制成功提示语
        this.showShare = false; //同时关闭分享框
      } else if (index == 1) {
        getQrcode(this.href).then((result) => {
          this.qrcode = result;
          this.show = true;
        });
      }
    },
    // 展开文章
    open() {
      this.isMore = false;
    },
    // 收起文章
    close() {
      // 回到顶部
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      document.body.scrollTop = 0;
      this.isMore = true;
    },
    // 判断滚动
    pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      scrollTop > 1200 ? (this.closeButton = true) : (this.closeButton = false);
    },
    // 点击推荐商品,重新加载该页面并重新传值
    refresh(tid) {
      // 重新传参
      this.$router.replace({
        name: 'Articles',
        params: { tid },
      });
      // 回到顶部
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      document.body.scrollTop = 0;
      // 刷新页面
      this.$router.go(0);
    },
  },
};
</script>
<style lang="scss">
@import './scss/article.scss';
</style>
